<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        因为form发送请求会跳转页面

        所以可以使用ajax完成无跳转的请求

        ajax ： Asynchrous JavaScript And XML 异步的js和xml（在js中发送异步的请求）

        html： hyper Text Markup Language 超文本标记语言
        xml：eXtensible Markup  Language  可扩展标记语言

        早期请求时数据的传递格式使用的是xml

        现在使用的都是json： 
        json是字符串   JavaScript Object Notation ,即js对象表示法


     -->
    <script>
        // XMLHttpRequest()
        // 对象用来与服务端进行交互 


        // 发送请求第一步：
        // 1. 构建一个XMLHttpRequest()对象
        var xhr = new XMLHttpRequest();

        // 2. 监听请求状态的函数 一旦发送一个请求 请求会经历5个阶段
        xhr.onreadystatechange = function () {
            //xhr.readyState 获取当前请求状态的 状态值
            // 0
            // 1
            // 2
            // 3
            // 4
            // 5
            console.log(xhr.readyState);
            if (xhr.readyState === 0) {
                console.log('请求尚未初始化,open执行之前');
            } else if (xhr.readyState === 1) {
                console.log('请求初始化完成,open执行完,send还没执行')
            } else if (xhr.readyState === 2) {
                console.log("send执行,服务端尚未处理")
            } else if (xhr.readyState === 3) {
                console.log("服务端接收到了,开始处理")
            }
            else if (xhr.readyState === 4) {
                console.log("服务端处理完成,作出响应，请求结束")
                // xhr.responseText获取响应数据
                // 当前请求地址返回回来的数据是json字符串
                console.log(xhr.responseText);
                var data = JSON.parse(xhr.responseText);
                console.log(data)

            }
            }
            // 3. 配置请求信息 ： 请求类型  请求地址
            // 参数1： 请求类型
            // 参数2： 请求地址（url）
            // 参数3： 是否发送异步请求（可省）
            xhr.open('get', 'https://cnodejs.org/api/v1/topics');
            // 4. 发送这个请求
            xhr.send();


    </script>
</body>

</html>